<template>
	<view class="page">
		<view class="header">
			<image class="avatar" @click="uploadImg" v-if="!formDate.avatar" mode="widthFix" src="../static/icon_11.png"></image>
			<image class="avatar" @click="uploadImg" v-else :src="formDate.avatar" mode="widthFix"></image>
			<view class="desc" v-if="!formDate.avatar">上传头像</view>
			<view class="desc" v-else>点击更换头像</view>
		</view>
		
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">爱宠名字</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="formDate.nickName" type="text" placeholder="请输入爱宠名字" placeholder-class="placeholder-class" />
				</view>
			</view>
			<view class="form-group form-group__picker">
				<view class="form-group__title">出生日期</view>
				<view class="form-group__con" @click="changeShow('showTime', true)">
					<view v-if="!formDate.birthday" class="placeholder-class">点击选择</view>
					<view v-else>{{common.subTime(formDate.birthday, 10)}}</view>
					<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
				</view>
				<u-picker mode="time" @confirm='selectTime' v-model="showTime" ></u-picker>
			</view>
			<view class="form-group form-group__picker">
				<view class="form-group__title">领养日期</view>
				<view class="form-group__con" @click="changeShow('showTime2', true)">
					<view v-if="!formDate.adoptionTime" class="placeholder-class">点击选择</view>
					<view v-else>{{common.subTime(formDate.adoptionTime, 10)}}</view>
					<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
				</view>
				<u-picker mode="time" @confirm='selectAdoptionTime' v-model="showTime2" ></u-picker>
			</view>
			<view class="form-group form-group__picker">
				<view class="form-group__title">爱宠种类</view>
				<view class="form-group__con" >
					<picker class="form-group__from" mode="selector" :range="petsType" range-key="name" @change="pickerChange">
						<view class="sub-div">
						<view v-if="!formDate.petTypeName" class="picker-res placeholder-class">{{pickerRes}}</view>
						<view v-else class="picker-res">{{formDate.petTypeName}}</view>
						<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
						</view>
					</picker>
					
				</view>
			</view>
			<view class="form-group form-group__picker">
				<view class="form-group__title">爱宠品种</view>
				<view class="form-group__con" >
					<picker class="form-group__from" mode="selector" :range="varieties" range-key="name" @change="pickerVarietiesName">
						<view class="sub-div">
							<view v-if="!formDate.varietiesName" class="picker-res placeholder-class">{{pickerRes}}</view>
							<view v-else class="picker-res">{{formDate.varietiesName}}</view>
							<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-group form-group__checkbox">
				<view class="form-group__title">爱宠性别</view>
				<view class="form-group__con ">
					<view :class="formDate.petSex === index?'op op-active':'op'" v-for="(item, index) in common.petsSex" @click="muSelect(index)">{{item}}</view>
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">爱宠体重</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="formDate.weight" type="text" placeholder="请输入爱宠体重(单位:kg)" placeholder-class="placeholder-class" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">爱宠颜色</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="formDate.petColor" type="text" placeholder="请输入爱宠颜色" placeholder-class="placeholder-class" />
				</view>
			</view>
			<view class="form-group form-group__checkbox">
				<view class="form-group__title">是否绝育</view>
				<view class="form-group__con ">
					<view :class="!formDate.isSterilization?'op op-active':'op'" @click="muSelect2(false)">未绝育</view>
					<view :class="formDate.isSterilization?'op op-active':'op'" @click="muSelect2(true)">已绝育</view>
				</view>
			</view>
		</view>
		<view class="footer-block"></view>
		<view class="footer-block"></view>
		<view class="circular-submit circular-submit-pop" @click="formSubmit">立即保存</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				common,
				petsType: [],
				showTime: false, // 控制出生日期弹窗
				showTime2: false, // 领养日期
				pickerRes: '点击选择',
				formDate: {
					avatar: 'http://qny.dqword.com/035d56b8173544dc941d0708df825ada.png', // 头像
					nickName: '', // 宠物昵称
					birthday: '', // 生日
					adoptionTime: '', // 领养日期
					petType: '', // 种类ID
					petTypeName: '', // 种类名称
					varieties: '', // 品种
					varietiesName: '', // 品种名称
					petSex: 0, // 性别
					petColor: '', // 宠物颜色
					weight: '', // 体重
					isSterilization: false // 是否绝育
				},
				
				varieties: [], // 宠物种类，先选种类才有品种
			}
		},
		
		async onLoad(options) {
			await this.getPetsType()
			if(options.op === 'edit'){
				await this.getEditPets()
			}
		},
		
		methods: {
			getPetsType() {
				api.getDictionaryArrayByCode({onlyCode: common.dicCode.petType}, res => {
					console.log(res);
					this.petsType = res || []
				})
			},
			
			// 获取编辑时的宠物信息
			getEditPets() {
				let editPets = common.getStorage('editPets') || {}
				if(Object.keys(editPets).length > 0) {
					this.formDate = editPets
					this.formDate.petTypeName = editPets.petTypeView
					this.formDate.varietiesName = editPets.varietiesView
				}
			},
			
			// 上传头像
			uploadImg() {
				common.imgUpload(res => {
					console.log(res);
					this.formDate.avatar = res
				})
			},
			
			// 控制出生日期时间弹窗
			changeShow(field, status) {
				console.log(field);
				this.$data[field] = status
			},
			
			// 选择种类
			pickerChange(e) {
				console.log(e);
				const index = e.detail.value
				this.formDate.petType = this.petsType[index]['id']
				this.formDate.petTypeName = this.petsType[index]['name']
				this.varieties = this.petsType[index]['children']
			},
			
			// 选择品种
			pickerVarietiesName(e) {
				const index = e.detail.value
				if(this.varieties.length > 0) {
					this.formDate.varieties = this.varieties[index]['id']
					this.formDate.varietiesName = this.varieties[index]['name']
				}
			},
			
			// 选择时间
			selectTime(e) {
				console.log(e);
				this.formDate.birthday = `${e.year}-${e.month}-${e.day}`
			},
			
			selectAdoptionTime(e) {
				this.formDate.adoptionTime = `${e.year}-${e.month}-${e.day}`
			},
			
			// 选择性别
			muSelect(index) {
				this.formDate.petSex = index
			},
			
			// 是否绝育
			muSelect2(status) {
				this.formDate.isSterilization = status
			},
			
			formSubmit() {
				let formData = this.formDate
				console.log(formData);
				if(!formData.avatar) { this.$showToast('请上传宠物头像~'); return }
				if(!formData.nickName) { this.$showToast('请填写宠物名字~'); return }
				if(!formData.weight) { this.$showToast('请填写宠物体重~'); return }
				if(!formData.birthday) { this.$showToast('请选择宠物生日~'); return }
				if(!formData.adoptionTime) { this.$showToast('请选择宠物领养日期~'); return }
				if(!formData.petType) { this.$showToast('请选择宠物物种~'); return }
				if(!formData.varieties) { this.$showToast('请选择宠物品种~'); return }
				if(!formData.petColor) { this.$showToast('请选择宠物颜色~'); return }
				api.savePetPutOnRecord(formData, res => {
					console.log(res);
					this.$showToast('爱宠保存成功, 页面即将返回~')
					uni.removeStorageSync('editPets')
					setTimeout(() => {
						this.$link('/pagesMine/pets')
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header{
		border-bottom: 1px solid $border-color;
		padding-bottom: 50upx;
	}
	.desc{
		margin-top: 20upx;
	}
	.avatar{
		background-color: $bg-dark-color;
		height: 90upx !important;
		width: 90upx !important;
		display: block;
	}
</style>
